<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>MARRIAGE</title>
    <script src="/static/js/vue.js"></script>
    <script src="/static/js/axios-0.18.0.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

</head>

<style>
    .el-header, .el-footer {
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        line-height: 60px;
    }

    .el-aside {
        background-color: #ffffff;
        color: #333;
        text-align: center;
        line-height: 200px;
    }

    .el-main {
        background-color: #ffffff;
        color: #333;
        text-align: center;
        line-height: 800px;
        padding-top: 50px;
    }

    body > .el-container {
        margin-bottom: 40px;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }
</style>


<body>

<div id="app">
    <el-container>
        <el-header style="background-color: #111111;color: white;position: relative;">
            <a th:href="@{/users/toFindUserListPage}" style="color: white;text-decoration: none;position: absolute;left: 20px;"><i class="el-icon-arrow-left"></i>返回</a>
            用户详情
            <a @click="suaxin()" style="color: white;text-decoration: none;float: right;margin-left: 10px"><i class="el-icon-refresh"></i>刷新</a>&nbsp;&nbsp;&nbsp;&nbsp
            <a th:href="@{/users/toIndex}" style="color: white;text-decoration: none;float: right;"><i class="el-icon-s-home"></i>首页</a>&nbsp;&nbsp;&nbsp;&nbsp
        </el-header>
        <el-header style="height: 200px;background-color:#FF4F81;padding-top: 60px">
            <span style="font-size:40px;font-weight: bold">{{userInfo.userName}}</span>
            <span >收藏 {{userInfo.userNumber}} 次</span>
            <br/>
            <el-button round
                       v-if="friendStatus == '0'?true:false"
                       @click="sayHello()"
                       style="position: absolute;left:100px;font-size:20px"><i class="el-icon-chat-round" style="color:#00b7ff;"></i>打招呼</el-button>
            <el-button round
                       v-if="friendStatus == '0'?true:false"
                       @click="addFriend()"
                       style="position: absolute;left:240px;font-size:20px"><i class="el-icon-plus" style="color:#00b7ff;"></i>加好友</el-button>
            <el-button round
                       v-if="friendStatus == '1'?true:false"
                       @click="addChat()"
                       style="position: absolute;left:220px;font-size:20px"><i class="el-icon-chat-dot-round" style="color:#00b7ff;"></i>聊天</el-button>
            <el-button round
                       v-if="friendStatus == '1'?true:false"
                       :disabled="true"
                       style="position: absolute;left:100px;font-size:20px"></i>好友</el-button>
            <el-button round
                       v-if="favor == '1'?true:false"
                       @click="deleteFavorite()"
                       style="position: absolute;right:100px;font-size:20px"><i class="el-icon-star-on" style="color:yellow;"></i>已收藏</el-button>
            <el-button round
                       v-if="favor ==' 0'?true:false"
                       @click="addFavorite()"
                       style="position: absolute;right:100px;font-size:20px"><i class="el-icon-star-off" style="color:grey;"></i>未收藏</el-button>
        </el-header>
        <el-container>
            <el-aside width="400px">
            </el-aside>
            <el-main text-align="center">
                <el-descriptions column="1" style="font-size: 25px;margin: 0 auto">
                    <el-descriptions-item label="用户姓名">{{userInfo.realName}}</el-descriptions-item>
                    <el-descriptions-item label="用户性别">
                        <el-tag v-if="userInfo.userSex=='1'?true:false" style="font-size:25px">男</el-tag>
                        <el-tag v-if="userInfo.userSex=='2'?true:false" style="font-size:25px">女</el-tag>
                    </el-descriptions-item>
                    <el-descriptions-item label="用户年龄">{{userInfo.userAge}}</el-descriptions-item>
                    <el-descriptions-item label="婚姻状态">{{userInfo.userMaritalStatus}}</el-descriptions-item>
                    <el-descriptions-item label="用户身高">{{userInfo.userHeight}}</el-descriptions-item>
                    <el-descriptions-item label="用户生日">{{userInfo.userBirthday}}</el-descriptions-item>
                    <el-descriptions-item label="用户星座">{{userInfo.userConstellation}}</el-descriptions-item>
                    <el-descriptions-item label="用户学历">{{userInfo.userEducation}}</el-descriptions-item>
                    <el-descriptions-item label="用户工作">{{userInfo.userJob}}</el-descriptions-item>
                    <el-descriptions-item label="用户工资">{{userInfo.userSalary}}</el-descriptions-item>
                    <el-descriptions-item label="用户号码">{{userInfo.userPhone}}</el-descriptions-item>
                    <el-descriptions-item label="用户邮箱">{{userInfo.userMail}}</el-descriptions-item>
                    <el-descriptions-item label="联系地址">{{userInfo.userAddress}}</el-descriptions-item>
                    <el-descriptions-item label="喜欢的菜">{{hobby.hobbyDish}}</el-descriptions-item>
                    <el-descriptions-item label="喜欢的歌">{{hobby.hobbySong}}</el-descriptions-item>
                    <el-descriptions-item label="喜欢的书">{{hobby.hobbyBook}}</el-descriptions-item>
                    <el-descriptions-item label="喜欢的运动">{{hobby.hobbySports}}</el-descriptions-item>
                    <el-descriptions-item label="喜欢的一句话">{{hobby.hobbyFamousQuote}}</el-descriptions-item>
                </el-descriptions>
            </el-main>
            <el-aside width="100px">
            </el-aside>
        </el-container>
        <el-footer style="background-color:#202329 ;color: white;"><!--系统公司信息-->
            <p style="margin-bottom: 20px" >© 2022 Match Marriage All rights reserved | Design by
                <a href="https://blog.csdn.net/qq_45839699?type=sub&subType=watch" style="color: white"> ZJ.</a>
            </p>
        </el-footer>
    </el-container>
</div>

</body>
<script>
    var userId=[[${userId}]]
    new Vue({
        el: "#app",
        data(){
            return {
                userInfo:[],
                favor:'',
                friendStatus:'',
                hobby:'',
            }
        },
        mounted(){
            var _this=this
            axios({
                headers:{'Content-Type':'application/json;charset=utf8'},
                method:"post",
                url:"findUserByUserIdForFriend",
                data:userId
            }).then(function(response) {
                _this.userInfo = response.data;
                _this.userInfo.userBirthday=timestampToTime(response.data.userBirthday);

            });
            axios({
                headers:{'Content-Type':'application/json;charset=utf8'},
                method:"post",
                url:"/favorites/findUserAndUserId",
                data:userId
            }).then(function(response) {
                _this.favor = response.data;
            });
            axios({
                headers:{'Content-Type':'application/json;charset=utf8'},
                method:"post",
                url:"/friends/findUserAndUserId",
                data:userId
            }).then(function(response) {
                _this.friendStatus = response.data;
            });
            axios({
                headers:{'Content-Type':'application/json;charset=utf8'},
                method:"post",
                url:"/friends/findHobbyByUserId",
                data:userId
            }).then(function(response) {
                _this.hobby = response.data;
            });
        },
        methods: {
            suaxin(){
                location.reload();
            },
            deleteFavorite(){
                var _this = this;
                axios({
                    method:"get",
                    url:"/favorites/delUserFavorites",
                }).then(function(response) {
                });
                location.reload(true);
            },
            addFavorite(){
                var _this = this;
                axios({
                    method:"get",
                    url:"/favorites/addUserFavorites",
                }).then(function(response) {
                });
                location.reload(true);
            },
            //
            sayHello(){
                var _this = this;
                axios({
                    headers:{'Content-Type':'application/json;charset=utf8'},
                    method:"post",
                    url:"/chat/findByUserIdAndOtherId",
                    data:userId
                }).then(function(response) {
                    if (response.data=="1"){
                        _this.$message.warning("您已向对方打过招呼了")
                    }else {
                        axios({
                            headers:{'Content-Type':'application/json;charset=utf8'},
                            method:"post",
                            url:"/chat/addSayHelloByUserAndUserId",
                            data:userId
                        }).then(function(response) {
                            if (response.data=="1") {
                                _this.$message.success("您向对方打招呼成功")
                            }else {
                                _this.$message.error("您向对方打招呼失败")
                            }
                        });
                    }
                });
            },
            //
            addFriend(){
                var res;
                var _this = this;
                axios({
                    headers:{'Content-Type':'application/json;charset=utf8'},
                    method:"post",
                    url:"/friends/findFriendStatusWhenOne",
                    data:userId
                }).then(function(response) {
                    if (response.data=="1"){
                        _this.$message.warning("您已申请过添加好友了，等待对方通过")
                    }else {
                        axios({
                            headers:{'Content-Type':'application/json;charset=utf8'},
                            method:"post",
                            url:"/friends/addFriendByUserAndUserId",
                            data:userId
                        }).then(function(response) {
                            _this.$message.success("发送好友申请成功！")
                        });
                    }
                });
            },
            addChat(){
                var f=document.createElement('form');
                f.style.display='none';
                f.action='/chat/toChatPage';
                f.method='post';
                f.innerHTML='<input type="hidden" name="userId" value="'+userId+'"/>';
                document.body.appendChild(f);
                f.submit();
            }
        }

    })
    function timestampToTime(timestamp) {
        var date = new Date(timestamp );//时间戳为10位需*1000，时间戳为13位的话不需乘1000
        var Y = date.getFullYear() + '-';
        var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1):date.getMonth()+1) + ' ';
        var D = (date.getDate()< 10 ? '0'+date.getDate():date.getDate())+ ' ';
        return M+'月'+D+'日';
    }
</script>
</html>
